<script setup lang="ts">
import Taro from "@tarojs/taro";
import { useRouter } from "@tarojs/taro";

import ByCell from "@/components/ui/ByCell.vue";
import Page from "@/components/common/Page.vue";
import ByButton from "@/components/ui/ByButton.vue";
import ByAvatar from "@/components/ui/ByAvatar.vue";
import ContentBox from "@/pages/index/components/ContentBox.vue";

import useApp from "@/stores/app";
import useForm from "@/hooks/useForm";
import useFetch from "@/hooks/useFetch";
import useSubscribeMessage from "@/hooks/useSubscribeMessage";

import ApiMerchant from "@/api/merchant";

import { TMerchantInfo, TStaffResult } from "@/global";

const { params } = useRouter();
const mid = Number(params.mid || 0);

const stateApp = useApp();

// 订阅通知：店员申请
const subscribe = useSubscribeMessage("staff");

// 获取店员申请审核结果
useFetch<TStaffResult>(ApiMerchant.applyMerchantStaffResult, {
  showLoading: true,
  defaultParams: { merchant_id: mid },
  onSuccess: (res: any) => {
    // 如果没有审核结果，显示申请页面
    if (!res) {
      runMerchantInfo();
      return;
    }

    switch (res.status) {
      case 1:
        Taro.redirectTo({ url: `result?mid=${mid}` });
        break;
      case 2:
        Taro.switchTab({ url: `/pages/merchant/index?mid=${mid}` });
        break;
    }
  },
});

// 获取商户详情
const { data: merchantInfo, run: runMerchantInfo } = useFetch<TMerchantInfo>(
  ApiMerchant.getMerchantDetailById,
  {
    defaultParams: { id: mid },
    afterFetch: (res: any) => res?.merchant_detail,
  }
);

// 店员申请加入商户
const { loading, model, submit } = useForm(ApiMerchant.applyMerchantStaff, {
  defaultModel: {
    staff_name: "",
    merchant_id: mid,
    mobile: stateApp.userInfo?.mobile,
  },
  rules: {
    staff_name: { required: true, message: "请填写真实姓名" },
  },

  onSuccess() {
    Taro.showToast({ title: "申请成功" });
    setTimeout(() => {
      // 跳转到审核结果页面
      Taro.redirectTo({ url: `result?mid=${mid}` });
    }, 1500);
  },
});

// 提交按钮点击事件
const handleBtnTap = async () => {
  // 订阅模板消息
  await subscribe();
  submit();
};

</script>

<template>
  <Page height="200rpx" v-if="merchantInfo">
    <ContentBox class="mt-6">
      <view class="px-6 pb-6">
        <ByCell label="品牌">
          <view class="flex items-center justify-end">
            <ByAvatar :src="merchantInfo?.merchant_logo_png" />
            <text class="ml-1">
              {{ merchantInfo?.merchant_title }}
            </text>
          </view>
        </ByCell>
      </view>
    </ContentBox>

    <ContentBox class="mt-6" hideBgImg>
      <view class="px-6 pb-6">
        <template v-if="stateApp.isLogined">
          <ByCell label="姓名">
            <input
              v-model="model.staff_name"
              placeholder="请输入真实姓名"
              class="h-[92px] leading-[92px] text-right"
              maxlength="16"
            />
          </ByCell>

          <ByCell label="手机号">
            <input
              :disabled="true"
              :value="model.mobile"
              placeholder="请输入手机号"
              class="h-[92px] leading-[92px] text-right"
            />
          </ByCell>

          <ByButton
            block
            type="primary"
            class="mt-5.5"
            :loading="loading"
            :disabled="!model.mobile"
            @tap="handleBtnTap"
            >申请加入
          </ByButton>
        </template>

        <view v-else>
          <view class="pt-10 text-xl text-center mb-5"
            >未登录，不能申请，请先登录
          </view>
          <ByButton block type="primary" class="mt-5.5" to="/pages/login/index"
            >去登录
          </ByButton>
        </view>
      </view>
    </ContentBox>
  </Page>
</template>
